﻿@{
    ViewBag.Title = "Thiết kế";
    Layout = "../Shared/_GemLayout.cshtml";
    string language = Html.GetLanguageName();
}
@using System.Activities.Statements
@using CuongHanh
@using CuongHanh.Context
@using CuongHanh.Models
@model List<CuongHanh.Models.MyStyle>
<script src="@Url.Content("~/Content/newcss/js/jquery.carouFredSel-6.0.4-packed.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/newcss/js/design-and-customise.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Scripts/zoomimage/jquery.fancybox.css")" rel="stylesheet" type="text/css"/> 
<script type="text/javascript">
     styleTypeId = parseInt('@ViewBag.StyleType');

    function init() {
        link.parentLoadMaterialStoneChildStyle = '@Url.Action("ParentLoadMaterialStoneChildStyle")';
        link.childLoadMaterialStone = '@Url.Action("ChildLoadMaterialStone")';
        link.GetImageBySize = '@Url.Action("GetImageBySize")';

        link.GetImage = '@Url.Action("GetImageFromData")';
        link.Language = '@ViewBag.Language';
        //load normal size cho tung loai trang suc
        loadNormalSize();
        resetGlobalDatas();
        //an cac thong tin design ban dau
        $('#childStyles').hide();
        $('#childMaterials').hide();
        $('#childStones').hide();

        selectedParentStyle(0, parseInt('@(Model.Count > 0
                                                 ? Model[0].Id
                                                 : 0)'));
    }


    $(function () {
        $(window).resize(function() {
            changePopupSize();
        });

        changePopupSize();


        $('#parent_Material').change(function() {
            parentMaterialChanged();
        });

        $('#child_Material').change(function () {
            childMaterialChanged();
        });


        $('#style-size').change(function () {
            sizeChanged();
        });

        $('.bg_img').carouFredSel({
            auto: false,
            items: 1,
            scroll: {
                fx: 'fade'
            }
        });

        $('.img_list img').click(function () {
            $('.img_list').trigger('slideTo', [this, -1]);
        });
        $('.img_list img:eq(1)').addClass('selected');

        $('#slide_image').carouFredSel({
            width: 260,
            items: 3,
            scroll: 1,
            auto: false,
            prev: '#prev',
            next: '#next',
        });
        //go to next item
        $('#slide_image img').click(function () {
            $('#slide_image').trigger('slideTo', [this, -1]);
        });

        $('#slide_image1').carouFredSel({
            width: 260,
            items: 3,
            scroll: 1,
            auto: false,
            prev: '#prev1',
            next: '#next1',
        });
        //go to next item
        $('#slide_image1 img').click(function () {
            $('#slide_image1').trigger('slideTo', [this, -1]);
        });

        $('#slide_image2').carouFredSel({
            width: 260,
            items: 3,
            scroll: 1,
            auto: false,
            prev: '#prev2',
            next: '#next2',
        });

        //go to next item
        $('#slide_image2 img').click(function () {
            $('#slide_image2').trigger('slideTo', [this, -1]);
        });

        $('#slide_image3').carouFredSel({
            width: 260,
            items: 3,
            scroll: 1,
            auto: false,
            prev: '#prev3',
            next: '#next3',
        });


        init();
    });


    function selectedParentStyle(index, id) {
        resetMyDesign();
        $('#childStyles').hide();
        $('#childMaterials').hide();
        $('#childStones').hide();
        $('#parent-style-Selected-Index').html(index + 1);
        $('#style-size').val(normalSize);
        myDesign.ParentStyleId = id;
        parentLoadMaterialStoneChildStyle(id);
    }


    function changeImageForSelected() {
        $('#main_design_image').attr('src', buildParamForGetImage());
    }


    function childSelectedStyle(index, id) {
        $('#child-style-Selected-Index').html(index + 1);
        myDesign.ChildStyleId = id;
        childLoadMaterialStone(myDesign.ChildStyleId);
    }
    
    //start bag

    function addToBag() {
        myDesign.__RequestVerificationToken = $('input[name="__RequestVerificationToken"]').val();
        $.ajax({
            url: '@Url.Action("AddToCartOfGem","Cart")',
             type: "POST",
             data: myDesign,
             contentType: "application/x-www-form-urlencoded",
             success: function(result) {
                 window.loadBagForGem();
                 $('#count-cart-item').load('@Url.Action("CountCartItemOfGem","Cart")', function () {
                 });
             }
         });
     }

     //end bag

     //start size

     function loadNormalSize() {
         switch (styleTypeId) {
         case 1:
             normalSize = parseInt('@AppUtil.NORMAL_SIZE_MEN_RING');
             break;
         case 2:
             normalSize = parseInt('@AppUtil.NORMAL_SIZE_WOMENS_RING');
             break;
         case 3:
             normalSize = parseInt('@AppUtil.NORMAL_SIZE_BRACELETS');
             break;
         case 5:
             normalSize = parseInt('@AppUtil.NORMAL_SIZE_NECKLACE');
                break;
            default:
                normalSize = 0;
        }
    }

    //end size

</script>

<div class="Col1" id="styleDescription">

</div>


@using (Html.BeginForm("AddToCartOfGem","Cart", FormMethod.Post))
{
    @Html.AntiForgeryToken()
}


<div class="Col2">

    <img id="main_design_image" src="" width="300" height="300" href="javascript:void(0);" onclick="showPopupImage()"/>
    
                        
</div>

<div class="Col1">
    <p id="totalPrice" class="price"></p>
    <p class="title_small">@Html.GetResource("chooseyourstyle")<span id="parent-style-Selected-Index" class="selectedIndex">1</span><span> of @Model.Count</span></p>
    <div id="slide" class="slide">
        <div id="slide_image" class="slide_image">
            @for (int i = 0; i < Model.Count; i++)
            {
                <img src="@Url.Action("GetImageBySize",new{imageName= Model[i].Image,imageType=ImageType.Thumnail})" title="@Model[i].Name" onclick="selectedParentStyle(@i, @Model[i].Id)"/>
            }
        </div>
        <a id="prev" href="#" class="prev"></a>
        <a id="next" href="#" class="next"></a>
    </div>
    <p class="title_small">@Html.GetResource("material")</p>
    
    <select class="combobox-inner" id="parent_Material">
     
    </select>

    <div id="parentStones">
        <p class="title_small">@Html.GetResource("addastone")<span id="parent-Stone-Selected" class="selectedIndex">1</span><span id="parent-Stone-total-item"> of 10</span></p>
        <div class="slide">
            <div id="slide_image1" class="slide_image">
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
            </div>
            <a id="prev1" class="prev" href="#"></a>
            <a id="next1" class="next" href="#"></a>
        </div>
        <p class="title_small" id="parent-stone-description" style="color: #0088C1; text-transform: none; font-weight: bold;"></p>
    </div>

    <div id="childStyles">
    
        
        <p class="title_small">@Html.GetResource("chooseyourstyle")<span id="child-style-Selected-Index" class="selectedIndex">0</span><span id="child-style-total-item"> of 0</span></p>
        <div id="slide2" class="slide">
            <div id="slide_image2" class="slide_image">
           
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
            </div>
            <a id="prev2" href="#" class="prev"></a>
            <a id="next2" href="#" class="next"></a>
        </div>
    
    </div>
   <div id="childMaterials" style="display: none;">
        <p class="title_small">@Html.GetResource("material")</p>

     <select class="combobox-inner" id="child_Material">
     
    </select>
    
       </div>
    <div id="childStones">
        <p class="title_small">@Html.GetResource("addastone")<span id="child-Stone-Selected" class="selectedIndex">1</span><span id="child-stone-total-item"> of 10</span></p>
        <div class="slide">
            <div id="slide_image3" class="slide_image">
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
                <img src="@Url.Content("~/Content/newcss/images/transparent.png")" />
            </div>
            <a id="prev3" class="prev" href="#"></a>
            <a id="next3" class="next" href="#"></a>
        </div>
        <p class="title_small" id="child-stone-description" style="color: #0088C1; text-transform: none; font-weight: bold;"></p>
    </div>

    

    <p class="title_small">@Html.GetResource("size")</p>
    
    <select id="style-size" class="combobox-inner">
        <option value="">@Html.GetResource("choosesize")</option> 
        }
        @if(ViewBag.StyleType == 1
            || ViewBag.StyleType == 2)
        {
            for (int i = 1; i < 31; i++)
            {
                <option value="@i">@i</option>
            }
        }
        else if(ViewBag.StyleType == 3)
        {
            for (int i = 45; i < 71; i++)
            {
                <option value="@i">@i mm</option>
            }
        }
        else if(ViewBag.StyleType == 5)
        {
            <option value="38">38 cm</option>
            for (int i = 40; i < 81; i += 5)
            {
                <option value="@i">@i cm</option>
            }
        }
    </select>
    
  
    @if (language == AppUtil.LANGUAGE_EN)
    {
        @Html.Partial("Partial/_TiGia")
                
    }
    <input class="btn_blue" type="submit" value="@Html.GetResource("addtobag")" onclick="addToBag();"/>
    <div class="btn_grey" onclick="gotocart();" id="count-cart-item"> @Html.Partial("Partial/_CountCartItemOfGem")</div>
    <p class="list_socail"><img src="@Url.Content("~/Content/newcss/images/socail.png")" width="219" height="20" /></p>
</div>


<div id="fancybox-popup" class="fancybox-overlay fancybox-overlay-fixed" style="display: block; display: none;">
    <div id="fancybox-border" class="fancybox-wrap fancybox-opened" tabindex="-1" style="position: absolute; overflow: visible;">
        <div class="fancybox-skin" style="padding: 15px; width: auto; height: auto;">
            <img id="fancybox-popup-image" class="fancybox-image" alt="" src="">
            <a class="fancybox-close" href="javascript:void(0);" onclick=" javascript:$('#fancybox-popup').hide('slow'); " title="Close"></a>
        </div>
    </div>
</div>
<style type="text/css">
    #main_design_image {
        cursor: pointer;
    }
</style>

<script type="text/javascript">
    function changePopupSize() {
        var height = window.innerHeight-40;
        if (height > 600)
            height = 600;
        var width = window.innerWidth - height;
        $('#fancybox-border').css('top', (window.innerHeight - height) > 0 ? (window.innerHeight - height)/2 : 0);
        $('#fancybox-border').css('left', width > 0 ? width / 2 : 0);
        $('#fancybox-popup-image').css('height', height - 30);
        $('#fancybox-popup-image').css('width', height - 30);
    }

    function showPopupImage() {
        $('#fancybox-popup-image').attr('src', $('#main_design_image').attr('src'));
        $('#fancybox-popup').show('slow');
    }
</script>